import React, { useEffect } from 'react';
import Header from '../../components/liu/header'
import { useNavigate, useLocation } from 'react-router-dom'
import '../../styles/liu/serverDetail.scss'
import { Button, Form, Input, Col } from 'antd';
interface Props {

}
function ServeRecordDetail(props: Props) {
    var navigate = useNavigate()
    var location = useLocation()
    const [form] = Form.useForm()

    //挂载期获取回显数据
    useEffect(() => {
        form.setFieldsValue(location.state)
    }, [])

    return (
        <div className='servedetail'>
            <div className="main">
                <Header txt='服务详情'></Header>
                <div className="resident">
                    <h4>居民信息</h4>
                    <div className="inputbox">
                        <Form
                            name="basic"
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                            layout="inline"
                            form={form}
                        >

                            <Col span={8}>
                                <Form.Item
                                    label="姓名"
                                    name="name"

                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} style={{ color: "#2984f8" }} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="身份证号"
                                    name="id-num"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>


                            <Col span={8}>
                                <Form.Item
                                    label="性别"
                                    name="sex"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="出生年月"
                                    name="born"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="联系电话"
                                    name="phone"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="现居地"
                                    name="city"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="居民标签"
                                    name="tags"
                                >
                                    <span >{location.state.tags}</span>
                                </Form.Item>
                            </Col>

                            <Col span={16}></Col>


                            <Col span={24}><h4>服务信息</h4></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务编号"
                                    name="id"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务状态"
                                    name="signPending"
                                >
                                    <Input bordered={false} style={{ color: "#3DD4A7" }} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务机构"
                                    name="organization"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务团队"
                                    name="serverTeam"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务医生"
                                    name="doctor"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务包"
                                    name="server"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务项目"
                                    name="serverTypes"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务来源"
                                    name="serverSource"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务地点"
                                    name="serverPlace"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="预约时间"
                                    name="orderTime"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="提交时间"
                                    name="submitTime"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="审核时间"
                                    name="auditorTime"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="审核人"
                                    name="auditor"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>
                            {
                                location.state.signPending === "已取消" ?
                                    <>
                                        <Col span={8}>
                                            <Form.Item
                                                label="取消时间"
                                                name="cancelTime"
                                            >
                                                <Input bordered={false} />
                                            </Form.Item>
                                        </Col>

                                        <Col span={8}>
                                            <Form.Item
                                                label="取消原因"
                                                name="cancelTxt"
                                            >
                                                <Input bordered={false} />
                                            </Form.Item>
                                        </Col>
                                    </> :
                                    <Col span={8}>
                                        <Form.Item
                                            label="完成时间"
                                            name="finishTime"
                                        >
                                            <Input bordered={false} />
                                        </Form.Item>
                                    </Col>
                            }

                            <Col span={24}></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务备注"
                                    name="comment"
                                >
                                    <span>{location.state.comment == "" ? "无" : location.state.comment}</span>
                                </Form.Item>
                            </Col>


                            {
                                location.state.signPending === "已完成" ?
                                    <>
                                        <Col span={24}><h4>健康随访信息</h4></Col>
                                        <Col span={8}>
                                            <Form.Item
                                                label="血压"
                                                name=""
                                            >
                                                <span >{location.state.healthInfo.血压}</span>
                                            </Form.Item>
                                        </Col>
                                        <Col span={8}>
                                            <Form.Item
                                                label="空腹血糖"
                                                name=""
                                            >
                                                <span >{location.state.healthInfo.空腹血糖}</span>
                                            </Form.Item>
                                        </Col>

                                        <Col span={8}>
                                            <Form.Item
                                                label="心率"
                                                name=""
                                            >
                                                <span >{location.state.healthInfo.心率}</span>
                                            </Form.Item>
                                        </Col>

                                        <Col span={8}>
                                            <Form.Item
                                                label="病情描述"
                                                name=""
                                            >
                                                <span >{location.state.healthInfo.病情描述}</span>
                                            </Form.Item>
                                        </Col>
                                        <Col span={24}></Col>
                                        <Col span={8}>
                                            <Form.Item
                                                label="健康指导"
                                                name=""
                                            >
                                                <span >{location.state.healthInfo.健康指导}</span>
                                            </Form.Item>
                                        </Col>

                                    </> :
                                    <></>
                            }

                            <Col span={24}>
                                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                    <Button onClick={() => { navigate(-1) }}>返回</Button>
                                </Form.Item>
                            </Col>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ServeRecordDetail;